<template>
    <div class="login_pack">
        <div class="brand">
            <img class="logo" :src="LOGO" alt="Logo" />
        </div>

        <div class="login_card">
            <!-- 轮播图 -->
            <div class="info">
                <el-carousel height="600px">
                    <el-carousel-item v-for="(image, index) in images" :key="index">
                        <img class="img" :src="image" />
                    </el-carousel-item>
                </el-carousel>
            </div>

            <!-- 登录 -->
            <div  v-show="isLogin" class="form">
                <div class="form_login">
                    <h2>欢迎来到单词图谱</h2>
                    <el-form :model="loginForm" ref="loginForm" class="login-container">
                        <el-form-item prop="username">
                            <el-input
                                type="text"
                                v-model="loginForm.username"
                                autocomplete="off"
                                placeholder="请输入用户名"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                type="password"
                                v-model="loginForm.password"
                                autocomplete="off"
                                placeholder="请输入密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%;" @click="doLogin()">登 录</el-button>
                        </el-form-item>
                        <el-row style="text-align: center; margin-top: -10px;;">
                            <el-link type="primary" @click="doRegisterUI()">用户注册</el-link>
                        </el-row>
                    </el-form>
                </div>
            </div>

            <!-- 注册 -->
            <div  v-show="!isLogin" class="form">
                <div class="form_reg">
                    <h2>注册账户</h2>
                    <el-form :model="regForm" :rules="regRules" ref="regForm">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="regForm.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="regForm.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPassword">
                            <el-input
                                type="password"
                                v-model="regForm.checkPassword"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%;" @click="doRegister()">注 册</el-button>
                        </el-form-item>
                        <el-row style="text-align: center; margin-top: -10px;;">
                            <el-link type="primary" @click="doLoginUI()">返回登录</el-link>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import LOGO from "@/assets/logo.png";
import IMG1 from "@/assets/hImg1.jpeg";
import IMG2 from "@/assets/hImg2.jpeg";
import IMG3 from "@/assets/hImg3.jpeg";
import IMG4 from "@/assets/hImg4.jpeg";
import { validSubmit } from "@/js/formUtils";
import { fetchPost } from '../js/http';
import { user } from '../store/storeTest';
import { Notification } from 'element-ui';

export default {
    data() {
        var self = this;
        var validatePass = (rule, value, callback) => {
            if (value === "" || !value) {
                callback(new Error("请输入密码"));
            } else {
                if (self.regForm.checkPassword !== "") {
                    validatePass2(rule, value, callback);
                }
                self.regForm.isSuccess = true;
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "" || !value) {
                callback(new Error("请再次输入密码"));
            } else if (value !== self.regForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                self.regForm.isSuccess = true;
                callback();
            }
        };
        return {
            LOGO: LOGO,
            isLogin: true,
            images: [IMG1, IMG2, IMG3, IMG4],
            loginForm: {
                username: "luoyuyi",
                password: "angel009"
            },
            regForm: {
                username: null,
                password: null,
                checkPassword: null
            },
            regRules: {
                password: [
                    {
                        validator: validatePass,
                        trigger: "blur"
                    }
                ],
                checkPassword: [
                    {
                        validator: validatePass2,
                        trigger: "blur"
                    }
                ],
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        doRegisterUI() {
            this.isLogin = false;
        },
        doLoginUI() {
            this.isLogin = true;
        },
        doLogin() {
            validSubmit(this.$refs["loginForm"], () => {
                fetchPost("/frontUser/login", this.loginForm).then(() => {
                    user["username"] = this.loginForm.username;
                    this.$router.push("/");
                });
            });
        },
        doRegister() {
            validSubmit(this.$refs["regForm"], () => {
                fetchPost("/frontUser/register", this.regForm).then(() => {
                    Notification.info(`${this.regForm.username} 注册完成!`);
                    this.doLoginUI();
                })
            });
        }
    }
};
</script>
<style scoped>
.login_pack {
    width: 800px;
    margin: 0 auto;
}
.login_card {
    width: 100%;
    height: 600px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
}
.img {
    width: 100%;
    height: 600px;
}
.info {
    width: 50%;
    height: 100%;
    float: left;
}
.form {
    width: 50%;
    height: 100%;
    float: right;
}
.form_reg {
    margin: 0 auto;
    margin-top: 30px;
    width: 360px;
}
.form_login {
    margin: 0 auto;
    margin-top: 180px;
    width: 360px;
}

h2 {
    text-align: center;
}

.logo {
    width: 90px;
    height: 90px;
}

.brand {
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 25px;
    margin: 0 auto;
    margin: 40px auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
}
</style>